import React, { Component } from 'react';
import { connect } from 'dva';
import getUrlParam from '@/utils/getUrlParam';
import styles from './mScore.less';
import { Rate, Radio } from 'antd';

import initChart from '@/utils/initChart';
import { getAScoreOption } from '@/utils/warning-figure-chart.js';

@connect(({ altmanz }) => ({
  aScoreData: altmanz.aScoreData,
}))
class aScore extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({
      type: 'altmanz/getaScoreData',
      payload: {
        stock_code: getUrlParam('secu_code') || '000001',
      },
    });
  }

  render() {
    const RadioButton = Radio.Button;
    const RadioGroup = Radio.Group;
    let { aScoreData } = this.props;

    const quotaDesc = [
      '暂无',
      '计算公式：LVGI=本期资产负债率/上期资产负债率 。LVGI 指数检测公司的债务状况有无变动。如果本期负债率上升，财务操纵的可能性是降低的，因为发展中公司偏向于借债，偿还能力佳，并且将负债显示在报表上更加增加财务可信度。同样地，这个指标大于1意味着企业杠杆率升高，这会导致企业财务风险的增加，进而提高企业的违约风险，此时企业也更倾向于进行财务操纵，将自己的债务隐藏起来。通过对A股历史数据研究发现，LVGI上升的公司，股价表现相对下降的公司更好。',
      '计算公式：SGI=本期营业收入/上期营业收入 。SGI 指数检验营业收入是否有异常变动，操控利润通常都要通过操控营业收入。销售增长指数指本期的销售额与上期的销售额的比率。该增长并不意味着操纵收益，但增长中的公司更加容易有财务报表操纵的动力和压力。如果这个指标大于1，就意味着销售规模发生了扩张，既有的研究发现成长性强的企业可能更需要高的资本要求和财务状况标准以吸引投资者，所以他们有更高的盈余操纵动机，而营业收入作为一个比较好的衡量成长性的指标，在这里也被认为和操纵动机正相关。通过对A股历史数据研究发现，SGI指数小于1的公司表现往往大于SGI指数大于1的公司。',
      '计算公式：GMI=上期毛利率/本期毛利率。GMI 指数检测毛利率是否有异常变化。当毛利率指数大于1 时，意味着毛利率缩小了。毛利率缩小是一个消极的信号，前景不明朗的企业更有可能操纵盈余。这个指标指数值如果大于1，表明企业盈利的能力出现了下滑，这会导致企业有更高的进行财务操纵的倾向。通过对A股历史数据的研究，发现GMI指数越低的公司，股价表现往往更好。',
      '计算公式：DSRI=(本期应收账款⁄本期营业收入)/(上期应收账款⁄上期营业收入) 。 由于正常经营的公司应收账款通常比较稳定，如果这个指数突然出现明显的增长，就意味着企业经营环境可能出现恶化，被迫进行一系列销售信用调整来促进销售，其中很可能出现一些收入的提前确认行为，因此这个指标越高，意味着财务操纵的可能性越大。通过对A股历史数据的研究，发现应收账款占比下降的公司，股价表现往往更好。',
      'AQI=本期非实物资产比例/上期非实物资产比例 。AQI 指数检测公司是否可能通过操控非实物资产项目来控制利润率。如果这个指数大于1，表明企业的资产质量出现了下降，企业可能会通过对异常费用的资本化来进行费用的递延以虚增利润。通过对A股历史数据的研究，发现本期非实物资产比例向下变动的公司，股价表现往往更好。',
    ];
    let quotaText = quotaDesc[0];
    let scoreObj = {};
    if (aScoreData && aScoreData.data) {
      scoreObj = aScoreData.data.data.scores;
    }

    let typeIndex = 0;
    let chartType = ['OVERALL', 'X1', 'X2', 'X3', 'X4', 'X5'];

    function onRadioChange(e) {
      let _ind = chartType.indexOf(e.target.value);
      quotaText = quotaDesc[_ind];
      let _textBox = [];
      if (e.target.value == 'LGVI') {
        _textBox = ['上升是债务压力加大', '下降可能是隐藏债务'];
      } else if (e.target.value == 'SGI') {
        _textBox = ['上升是销售扩张', '下降是营收下滑'];
      } else if (e.target.value == 'GMI') {
        _textBox = ['上升是毛利下滑', '下降是盈利扩张'];
      } else if (e.target.value == 'DSRI') {
        _textBox = ['上升是应收账款增加，收现率下降', '下降是应收账款下降，收现率提示'];
      } else {
        _textBox = ['上升是流动资产比例增加', '下降是固定资产比例增加'];
      }
      let _bool = e.target.value != 'OVERALL' ? true : false;
      // console.log(_bool);
      if (aScoreData && aScoreData.data && document.getElementById('mychart')) {
        initChart(
          getAScoreOption(aScoreData.data.charts[_ind], 'altman-z', _bool, _textBox),
          'mychart'
        );
      }
    }

    if (aScoreData && aScoreData.data && document.getElementById('mychart')) {
      // console.log(aScoreData);
      initChart(getAScoreOption(aScoreData.data.charts[0], 'altman-z', false), 'mychart');
    }
    // if(chartOption){
    //   // myChart.setOption(chartOption);
    // }

    return (
      <div className={styles.exoticWrap}>
        <div className={[styles.commonScore, 'clearfix'].join(' ')}>
          <div className={styles.scoreCard}>
            <img src={require('./images/01.png')} />
            <dl>
              <dt>综合评分</dt>
              <dd className={styles.score}>{scoreObj.overallScore}</dd>
              <Rate value={(scoreObj.overallScore / 100) * 5} />
            </dl>
          </div>
          <div className={styles.scoreCard}>
            <img src={require('./images/02.png')} />
            <dl>
              <dt>本期评分</dt>
              <dd className={styles.score}>{scoreObj.thisScore}</dd>
              <Rate value={(scoreObj.thisScore / 100) * 5} />
            </dl>
          </div>
          <div className={styles.scoreCard}>
            <img src={require('./images/03.png')} />
            <dl>
              <dt>行业排名</dt>
              <dd className={styles.score}>{scoreObj.rank}</dd>
            </dl>
          </div>
          <div className={styles.scoreCard}>
            <img src={require('./images/04.png')} />
            <dl>
              <dt>区域排名</dt>
              <dd className={styles.score}>{scoreObj.province_rank}</dd>
            </dl>
          </div>
        </div>

        <div className={[styles.middleChartWrap, 'clearfix'].join(' ')}>
          <div id="chart-wrapper" className={[styles.chartWrapper, 'fl', 'clearfix'].join(' ')}>
            <div
              className={[styles.breadMar, 'fl', 'clearfix', 'special-radio-group-wrap'].join(' ')}
            >
              <RadioGroup onChange={onRadioChange} defaultValue="OVERALL">
                <RadioButton value="OVERALL">综合评分</RadioButton>
                <RadioButton value="X1">X1: 流动资本/总资产</RadioButton>
                <RadioButton value="X2">X2: 留存收益/总资产</RadioButton>
                <RadioButton value="X3">X3: 息税前收益/总资产</RadioButton>
                <RadioButton value="X4">X4: 优先股和普通股市值/总负债</RadioButton>
                <RadioButton value="X5">X5: 销售额/总资产</RadioButton>
              </RadioGroup>
            </div>
            <div id="mychart" className={[styles.mychart, 'fr'].join(' ')} />
          </div>

          <div className={[styles.quotaDesc, 'fr', styles.blockWrap].join(' ')}>
            <div className={[styles.cardHead, styles.blockHead].join(' ')}>
              <p>指标解释</p>
            </div>
            <div className={styles.blockBody}>
              <p>{quotaText}</p>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default aScore;
